<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" href="https://i.loli.net/2018/05/11/5af50d7591443.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>加华国际英语—雅思能力测试结果</title>
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/jh/question/testResult.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.7/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <div class="content">
            <div class="title">
                <h3>雅思能力测试结果</h3>
            </div>
            <div class="main">
                <div>
                    <img src="https://i.loli.net/2018/10/18/5bc842dcef48e.png" alt="">
                    <p style="display: none;">{{result}}</p>
                    <p style="display: none;">{{comment}}</p>
                    <ul>
                        <li>答对&nbsp;<span>{{correctNumber}}</span></li>
                        <li>答错&nbsp;<span>{{wrongNumber}}</span></li>
                        <li>未答&nbsp;<span>{{unanswered}}</span></li>
                    </ul>
                </div>
                <div>
                    <div class="goup"> <span>{{correctNumber}}</span>分&nbsp;</div>
                    <ul class="colorsample">
                        <li><span></span>答对</li>
                        <li><span></span>答错</li>
                        <li><span></span>未答</li>
                        <li>错题数量：<i>{{wrongNumber}}题</i></li>
                    </ul>
                    <ul class="am-avg-sm-8 boxes">
                        <li v-for="(item,index) in QsData" :class="[item.isCorrect == 1 ? 'correct-color' : '',item.isCorrect == 0 ? 'wrong-color' : '']">{{item.id}}
                            <span :class="[item.isCorrect == 0 ? 'am-icon-close' : '']" style="position: absolute;right: 0;bottom: 0;height: 75%;"></span></li>
                    </ul>
                    <button class="button" @click='tryAgain'>
                        重新测试
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="http://lib.h-ui.net/jquery.cookie/1.4.1/jquery.cookie.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.7/index.js"></script>
    <script>
    new Vue({
        el: '#app',
        data: {
            QsData: [],
            correctNumber: 0,
            wrongNumber: 0,
            unanswered: 0,
            thePrevious: 0,
            goUp: 27,
            comment: '1',
            result: '2'
        },

        mounted() {
            //加载数据
            this.setCookieData()
            this.statistics()

        },

        methods: {
            tryAgain() {
                this.$confirm('重新开始测试, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.location.href = "/jh/question"
                }).catch(() => {});
            },
            setCookieData() {
                //cookie 只能直接传字符串，通过JSON.stringify()把对象转化为字符串传递
                //在取值页面通过JSON.parse($.cookie('the_cookie'))再把字符串转化为对象
                //cookie要在服务器上运行才有用
                const getCookie = JSON.parse($.cookie('QsData_cookie'));
                this.QsData = getCookie;
            },
            //处理isCorrect数组
            statistics() {
                var count1 = 0;
                var count2 = 0;
                var count3 = 0;
                var count4 = 0;
                var count5 = 0;
                var count6 = 0;
                var count7 = 0;
                var count8 = 0;
                const QsDataLength = this.QsData.length;
                for (let i = 0; i < QsDataLength; i++) {
                    const isCorrect = this.QsData[i].isCorrect;
                    var correctFlag = isCorrect == 1
                    if (isCorrect == 0) {
                        this.wrongNumber++;
                    } else if (isCorrect == 1) {
                        this.correctNumber++;
                    } else {
                        this.unanswered++;
                    }
                    if (!correctFlag) {
                        var num = i + 1;
                        if (num >= 1 && num <= 3) {
                            count1++;
                        } else if (num >= 4 && num <= 7) {
                            count2++;
                        } else if (num >= 8 && num <= 14) {
                            count3++;
                        } else if (num >= 15 && num <= 17) {
                            count4++;
                        } else if (num >= 29 && num <= 20) {
                            count5++;
                        } else if (num >= 21 && num <= 28) {
                            count6++;
                        } else if (num >= 29 && num <= 33) {
                            count7++;
                        } else if (num >= 34 && num <= 38) {
                            count8++;
                        }
                    }
                }
                var cmt = "";
                if (count1 > 0) {
                    cmt = cmt + '学生对英语普通生活词汇很欠缺;'
                }
                if (count2 > 2) {
                    cmt = cmt + '对应国内4-6级词汇比较欠缺;'
                }
                if (count3 > 4) {
                    cmt = cmt + '综合语法欠缺;'
                }
                if (count4 > 2) {
                    cmt = cmt + '句子成分的语法知识欠缺;'
                }
                if (count5 > 1) {
                    cmt = cmt + '雅思基础阅读能力欠缺;'
                }
                if (count6 > 3) {
                    cmt = cmt + '英语基础听力能力欠缺;'
                }
                if (count7 > 1) {
                    cmt = cmt + '雅思基础听力能力欠缺;'
                }
                if (count8 > 2) {
                    cmt = cmt + '雅思听力裂解能力欠缺;'
                }
                if (this.correctNumber > 33) {
                  this.result = '适合进入雅思冲分班'
                } else if (this.correctNumber > 15) {
                  this.result = '英语基础一定程度上适合先进行缺失内容定位和补缺.对应40课时基础课程'
                } else {
                  this.result = '英语基本素质比较薄弱,需要从基础语法重新构建一遍.词汇欠缺情况比较严重.对应课程:20+40可是基础课程'
                }
                this.comment = cmt
                this.goUp = this.correctNumber - this.thePrevious;
            }

        }
    })
    </script>
</body>

</html>